<template>
  <!-- 每日推荐 -->
  <div id="recommendSongs" v-if="judge">
    <header>
      <Navbar navbarText="每日推荐" />
    </header>
    <div class="content">
      <!-- <p class="today">
        <span>{{today.slice(0,2)}}</span>
        <span>{{today.slice(2,5)}}</span>
      </p> -->
      <van-cell-group>
        <template #title>
          <div class="groupTitle">
            <p>
              播放全部<span style="font-size: 12px"
                >({{ dailySongs.length }})</span
              >
            </p>
          </div>
        </template>
        <van-cell
          v-for="(song, index) in dailySongs"
          :key="index"
          :title="song.name"
          @click="handleClick(index)"
        >
          <template #label>
            <span v-for="(ar, idx) in song.ar" :key="idx">{{
              ar.name + " - " + song.al.name
            }}</span>
          </template>
          <template #icon>
            <van-image
              width="46"
              height="46"
              style="padding-right: 10px"
              :src="song.al.picUrl"
            />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <Loading :loadingShow="loadingShow" />
  </div>
</template>

<script>
import Navbar from "@/components/navbar";
import Loading from "@/components/loading";
import { EventBus, judgeLogin } from "../../../currency";
import { getRecommendSongs } from "@/api/userInfo";
export default {
  name: "recommendSongs",
  data() {
    return {
      dailySongs: [],
      today: "",
      judge: false,
      loadingShow: false,
    };
  },
  components: { Navbar, Loading },
  methods: {
    handleClick(index) {
      this.$store.commit("getSongList", this.dailySongs);
      this.$store.commit("getIndex", index);
      EventBus.$emit("playMusic", "播放音乐");
    },
    initData() {
      this.loadingShow = true;
      let cookie = this.$store.state.userInfo.cookie;
      let date = new Date();
      this.today =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
        "/" +
        (date.getMonth() + 1);
      getRecommendSongs(cookie).then((res) => {
        this.dailySongs = res.data.dailySongs;
        this.loadingShow = false;
      });
    },
  },
  mounted() {
    this.judge = judgeLogin(this);
    if (this.judge) {
      this.initData();
    }
  },
};
</script>

<style scoped>
.groupTitle {
  color: #000;
  font-size: 16px;
  font-weight: bold;
}
.today span:nth-child(1) {
  font-size: 26px;
}
#recommendSongs /deep/ .van-image__img {
  border-radius: 7px;
}
</style>